<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.content{
				position: absolute;
				top:80px;
				left: 100px;
				width: 530px;
				height: 180px;
				border: solid 1px #000000;
				overflow: hidden;
				background:#FFF38F;
				
			}
			.content ul {
				
				float: right;
				text-align: center;
				width: 25px;
				padding: 0;
				
			}
			.content li {
				
				border: 1px solid #000000;
				width: 18px;
				list-style: none;
				cursor: pointer;
				
			}
			.selected{
				background: #E31E1C;
			}
		</style>
	</head>
	<body>
		<div class="content">
			 <ul>
		    	<li>1</li>
		    	<li>2</li>
		    	<li>3</li>
		    	<li>4</li>
		    	<li>5</li>
		    	<li>6</li>
		    </ul>
<!--一次全部请求出来减少访问次数-->

			<div class="box">
				<img src="img/dd_1.jpg" />
				<img src="img/dd_2.jpg" />
				<img src="img/dd_3.jpg" />
				<img src="img/dd_4.jpg" />
				<img src="img/dd_5.jpg" />
				<img src="img/dd_6.jpg" />
			</div>
			
		</div>
		<script type="text/javascript" src="js/jquery-3.1.1.js" ></script>
		<script>
			window.onload = init;
			function init(){
				change1 = setInterval("change()",1000);
			}
			var n = 0;
			function change(){
				if(n == 6){
					n = 0
				}
					
				$(".box img").eq(n).show().siblings().hide();
				
				$("li").eq(n).addClass("selected").siblings().removeClass("selected");
				n++;
			
			}
				function cleartime(){
				window.clearInterval(change1);
			}
			
			
			
			$(".content li").hover(function(){
				$(this).addClass("selected").siblings().removeClass("selected");
				var _index = $(this).index();
				$(".box img").eq(_index).show().siblings().hide();
				cleartime();
				 n = _index;
			})
			
			
				$(".content img").hover(function(){
				var _index = $(this).index();
				$(".box img").eq(_index).show().siblings().hide();
				cleartime();
				 n = _index;
			})

		$("li").mouseleave(function(){
				
			  init();
			})
			$("img").mouseleave(function(){
				
			  init();
			})
		</script>
	</body>
</html>
